var listDetail = '<li>';
listDetail= +'<a href="#" class="photo"><img src="../images/temp/50x60.jpg" alt="Jie Tang" /></a>';
listDetail= +'<dl>';
listDetail= +'<dt>01</dt>';
listDetail= +'<dd>H-index: 70 </dd>';
listDetail= +'<dd>Papers: 435</dd>';
listDetail= +'<dd>Citation: 55371</dd>';
listDetail= +'</dl>';
listDetail= +'<p class="info">Xifeng Yan Philip S. Yu Jian Pei Dong Xin Hong Cheng</p>';
listDetail= +'</li>';

var L = 0;	//当前第一个为li中第几个

var liW = jQuery("#cardList li").width();	
var total = jQuery("#cardList li").size();

//init
jQuery("#scrollNum").html((L+1) +"/" + total);
jQuery("#cardList").css("width",liW * total + "px"); //设置ol宽度

alert(jQuery("#scrollNum").html());

//右箭头
jQuery("#scrollRight").click(function(){
	alert(234);
	
	var L = Math.floor(-parseFloat( jQuery("#cardList").css("marginLeft"))/liW);
	
	if( L < total-1){
		//滚动条变化
		jQuery("#scrollBlock").animate(
			{marginLeft: (L+1)/(total-1)*100 + "%"},
			100
		);
		//列表滚动
		jQuery("#cardList").animate(
			{marginLeft: -(L+1)*liW + "px"},
			200,
			function(){	
				L++;
				jQuery("#scrollNum").html( (L+1) +"/" + total);
			}
		);
		
	}
});

//左箭头
jQuery("#scrollLeft").click(function(){
	var L = Math.ceil(-parseFloat( jQuery("#cardList").css("marginLeft"))/liW);
	if(L >= 1){
		//滚动条变化
		jQuery("#scrollBlock").animate(
			{marginLeft: (L-1)/(total-1)*100 + "%"},
			100
		);
		//列表滚动
		jQuery("#cardList").animate(
			{marginLeft: -(L-1)*liW + "px"},
			200,
			function(){
				L --;
				jQuery("#scrollNum").html( (L+1) +"/" + total);
			}
		);
	}
});


//滚动条
jQuery("#scrollBlock").mousedown(function(e){
	jQuery("#scrollBarOuter").append('<div class="temp" style="background:#fff;opacity:0;filter:alpha(opacity=0);width:880px;height:200px;margin-top:-90px;position:absolute;left:40px;"></div>');
	var blockM = e.pageX - jQuery("#scrollBlock").offset().left;
	var BarX = jQuery("#scrollBarOuter").offset().left;
	//jQuery("#scrollBlock").css("position","relative");
	
	jQuery("#scrollBarOuter").bind("mousemove",function(e){

		var blockX = e.pageX - BarX;
		if((blockX - blockM)>=0 && (blockX - blockM) <= jQuery("#scrollBarOuter").width()){
			jQuery("#scrollBlock").css("marginLeft",(blockX - blockM) +"px");
			var percent = -(blockX - blockM)/jQuery("#scrollBarOuter").width()*(liW * (total)- liW);

			jQuery("#cardList").css("marginLeft",percent + "px");
			
			jQuery("#scrollNum").html(-(Math.floor(percent/liW)) +"/" + total); //当前数量
		}
	});

});


jQuery(document).mouseup(function(){
	jQuery(".temp").remove();
	jQuery("#scrollBarOuter").unbind("mousemove");
	
});

